<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div>
          <tabletext :list="list" @handleSelectionChange="handleSelectionChange" :options="options"
                     :columns="columns" :operates="operates">
          </tabletext>
          <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="listQuery.page" :page-sizes="[10]"
                           :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper"
                           :total="total"> </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tabletext from '@/components/table'
import { manageIndex } from '@/assets/api'
export default {
  name: 'table1',
  data () {
    return {
      list: [], // table数据
      listQuery: {
        page: 1,
        limit: 20,
        systemname: undefined
      },
      total: null,
      options: {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true // 是否支持列表项选中功能
      }, // table 的参数
      columns: [
        {
          prop: 'dept_name',
          label: '姓名',
          align: 'center'
        }, {
          prop: 'pe_number',
          label: '电表名称',
          align: 'center'
        },
        {
          prop: 'position',
          label: '电表地址',
          align: 'center'
        }, {
          prop: 'username',
          label: '倍率',
          align: 'center'
        }
      ], // 需要展示的列
      // 按钮
      operates: {
        width: 250,
        list: [
          {
            id: '1',
            label: '查看',
            style: 'cursor:pointer;color: #FF6600;',
            show: true,
            class: 'el-icon-view',
            plain: true,
            method: (scope, row) => {
              this.handleEdit(row)
            }
          },
          {
            id: '2',
            label: '编辑',
            style: 'cursor:pointer;color: #409eff;',
            show: true,
            class: 'el-icon-edit',
            plain: true,
            method: (scope, row) => {
              this.handleEdit(row)
            }
          },
          {
            id: '3',
            label: '删除',
            style: 'cursor:pointer;color: #b3450e;',
            class: 'el-icon-delete',
            show: true,
            plain: false,
            method: (index, row) => {
              this.handleDel(row)
            }
          }
        ]
      } // 列操作按钮
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      manageIndex({
        page: '2'
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data
          this.total = res.count
        } else {
          this.$message.error('错误！')
        }
      })
    },
    handleSelectionChange (val) {
      console.log('val:', val)
    },
    handleSizeChange (val) {
      console.log(val)
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(val)
      this.listQuery.page = val
      this.getList()
    }
  },
  components: {
    tabletext
  }
}
</script>

<style lang="less">
.pagination-container{
  margin-top: 10px;
}

</style>
